/**
 8.个人常用相关函数
 @ 仅提供函数的练习
 常见问题
 1.如何关闭弹窗
 2.如何等待元素加载出来再进行操作
 3.如何处理用window.open 打开的page
 4.如何区分异步与同步
 5.如何开启模拟手机模式
 6.如何截图
 7.如何调用浏览器内的方法
 8.如何常规的点击事件
 9.如何获取浏览器文本内的值
 10.waitForResponse 如何用 ，一次是一个网络连接  想多次 需要循环
 11.page.$eval(selector, pageFunction[, ...args])
 如何使用..args 的参数
 12.如何切换页面
 */
const puppeteer = require('puppeteer'); //引入puppeteer库

/**
 * 个人库
 */
const pUtil = require('./util/PuppeteerUtil.js');
const xpathUtil = require('./util/XpathUtil.js');

(async () => {
    const browser = await puppeteer.launch({    //启动浏览器
        headless: false,   //代码运行时打开浏览器方便观察
        // devtools:true   //打开f12界面
    });
    const page = await browser.newPage();  //打开浏览器的一个tab 页
    /**
     *     1. 等待页面加载完成
     waitUntil <string|Array<string>> 满足什么条件认为页面跳转完成，默认是 load 事件触发时。指定事件数组，那么所有事件触发后才认为是跳转完成。事件包括：
     load - 页面的load事件触发时
     domcontentloaded - 页面的 DOMContentLoaded 事件触发时
     networkidle0 - 不再有网络连接时触发（至少500毫秒后）
     networkidle2 - 只有2个网络连接时触发（至少500毫秒后
     */
    //这里百度访问比较快 我们选择 networkidle2
    await page.goto('https://www.baidu.com/', {timeout: 10 * 1000, waitUntil: 'networkidle2'});  //访问网址 https://www.baidu.com/
    //等待一个指定连接发起请求 https://www.baidu.com/
    /*    const finalRequest = await page.waitForRequest('https://www.baidu.com/favicon.ico').then(request => {
            console.log(request.url());
        })*/
    //等待指定url返回响应
    /*    const finalResponse = await page.waitForResponse(response => {
            console.log(response.url());
            /!*        if (response.url() === 'https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/soutu/css/soutu.css' && response.status() === 200) {
                        console.log(response.url());
                        return true;
                    }*!/
            return true;
        }, {timeout: 10 * 1000});*/
    //TODO 1.如何关闭弹窗
    await pUtil.onDialog(page);
    //TODO 2.如何等待一个元素出现  演示等待 百度按钮元素出现
    //css 语法 #su
    await  page.waitForSelector('#su', {timeout: 10 * 1000, visible: true}).catch(e => console.log(e));
    //xpath 语法 '//input[@id="su"]'
    await  page.waitForXPath('//input[@id="su"]', {timeout: 10 * 1000, visible: true}).catch(e => console.log(e));

    //TODO 3.如何在浏览器实例上下文中执行自己的js
    //方法1 page.$eval系列 page.$eval(selector, pageFunction[, ...args])  演示传递参数
    let str = "page.$eval(selector, pageFunction[, ...args])  演示传递参数"
    await page.$eval("body", (el, args) => {
        console.log(args[0])
        alert(args[0])
    }, [str]);
    //方法2

    // await page.screenshot({path: 'screenshot/example.png'});  //将当前视图所见截图
    await page.waitFor(5 * 1000); //睡眠5s'
    await browser.close();  //关闭浏览器
})();